import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { renderLogType } from '@/common/macro_log'
import { State } from '@/apps/panel/reducers'
import './index.less'

export default function LogList() {
    const dispatch = useDispatch()
    const logsAll = useSelector((state: State) => state.logs)
    const logFilter = useSelector((state: State) => state.config.logFilter)
    const filters: any = {
        'All': () => true,
        'Echo': (item: any) => item.type === 'echo' || (item.type === 'error' && (!item.options || !item.options.ignored)),
        'Echo_And_Status': (item: any) => item.type === 'echo' || (item.type === 'error' && (!item.options || !item.options.ignored)) || item.type === 'status',
        // 'Info':   (item) => item.type === 'info' || item.type === 'echo' || item.type === 'reflect' || item.type === 'status',
        'Error': (item: any) => item.type === 'error' || item.type === 'report',
        'None': () => false
    }

    const logs = logsAll.filter(filters[logFilter] || (() => true));

    const renderLogText = (log: any) => {
        if (typeof log.text === 'function') {
            return log.text({ renderText: renderLogText })
        }

        if (['error', 'warning'].indexOf(log.type) === -1) {
            return log.text
        }

        const stack = log.stack || []
        const source = stack[stack.length - 1]
        const content = log.text
        if (!source) {
            return content
        }

        return (
            <span>
                <a
                    href="#"
                    onClick={e => {
                        e.preventDefault()
                    }}
                >
                    <span>第{source.commandIndex + 1}行：</span>
                    {!source.isSubroutine ? null : (
                        <span> (Sub: {source.macroName})</span>
                    )}
                </a>
                <span>: </span>  {content}
            </span>
        )
    }

    const shouldRenderLogStack = (log: any) => {
        if (log.stack.length <= 1) {
            return false
        }

        switch (log.type) {
            case 'error':
            case 'warning':
                return true
            case 'status':
                return /^Running/.test(log.text)
            default:
                return false
        }
    }

    const renderLogStack = (log: any) => {
        // Don't care about the top element in stack
        const stack = log.stack.slice(0, -1).reverse()

        if (stack.length === 0) {
            return null
        }

        return (
            <div style={{ marginLeft: '80px' }}>
                {stack.map((item: any, i: number) => (
                    <div key={i}>
                        在 <a
                            href="#"
                            onClick={e => {
                                e.preventDefault()

                                if (typeof item.commandIndex === 'number' && item.macroId) {
                                    gotoLineInMacro(
                                        item.macroId,
                                        item.commandIndex
                                    )
                                }
                            }}
                        >
                            用例 {item.macroName} 第{item.commandIndex + 1}行
                        </a>
                    </div>
                ))}
            </div>
        )
    }

    const gotoLineInMacro = (macroId: string, line: number) => {
        console.log(macroId, line)
    }

    return <div>

        <ul className="log-content">
            {logs.map((log: any, i: number) => (
                <li className={log.type} key={log.id}  >
                    <span className="log-type"><span>[</span>{renderLogType(log)}<span>]</span></span>
                    <pre className="log-detail">{renderLogText(log)}</pre>
                    {shouldRenderLogStack(log) ? renderLogStack(log) : null}
                </li>
            ))}
        </ul>
    </div>
}